@use "../../assets/scss/mixins/base" as mx;

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  width: 100vw;
}

.wrapper {
  font-size: 4px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .imac {
    position: relative;
    width: 120em;
    margin: 30px 30px 50px;
    .display {
      width: 100em;
      height: 60em;
      margin: 0 auto;
      background-color: royalblue;
      border: 2.5em solid #333;
      border-radius: 2.5em 2.5em 0 0;
      &::before {
        @include mx.pseudo();
        @include mx.rect(5px, 5px, #ccc, 50%);
        top: 2.5px;
        left: 50%;
        margin-left: -2.5px;
      }
    }
    .bottom {
      position: relative;
      width: 100em;
      height: 11em;
      background-color: #ccc;
      margin: 0 auto 60px;
      border-radius: 0 0 2.5em 2.5em;
      @include mx.pseudo-ba();
      &::before {
        top: 11em;
        left: 50%;
        margin-left: -11em;
        @include mx.rect(22em, 12em, #bdbdbd);
      }
      &::after {
        @include mx.rect(30em, 1em, #8e8e8e, 1em);
        top: 22em;
        left: 50%;
        margin-left: -15em;
      }
    }
  }
  .notebook {
    position: relative;
    font-size: 4px;
    width: 100em;
    margin: 50px auto;
    .display {
      @include mx.rect(77.5em, 52.5em, royalblue, 2.5em 2.5em 0 0);
      margin: 0 auto;
      border: 2.5em solid #333;
      &::before {
        @include mx.pseudo();
        @include mx.rect(5px, 5px, #ccc, 50%);
        top: 2.5px;
        left: 50%;
        margin-left: -2.5px;
      }
    }
    .bottom {
      position: relative;
      @include mx.rect(100em, 2.5em, #ccc);
      margin: 0 auto;
      @include mx.pseudo-ba();
      &::before {
        @include mx.rect(12em, 1em, #8e8e8e, 0 0 1.5em 1.5em);
        top: 0;
        left: 50%;
        margin-left: -6em;
      }
      &::after {
        bottom: -1em;
        left: 0;
        right: 0;
        border-top: 1em solid #959595;
        border-left: 2em solid transparent;
        border-right: 2em solid transparent;
      }
    }
  }
  .ipad {
    position: relative;
    margin: 30px;
    width: 50em;
    &::after {
      @include mx.pseudo();
      @include mx.rect(1.5em, 1.5em, #000, 50%);
      bottom: 2.5px;
      left: 50%;
      margin-left: -0.75em;
    }
    .display {
      @include mx.rect(30em, 40em, royalblue, 2em);
      margin: 0 auto;
      border: 2.5em solid #333;
      &::before {
        @include mx.pseudo();
        @include mx.rect(5px, 5px, #ccc, 50%);
        top: 2.5px;
        left: 50%;
        margin-left: -2.5px;
      }
    }
  }
}
